<template>
	<view class="list1">
		<view class="item" v-for="(item,index)  in 9">
			<view class="left">
				<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/37.png" mode="widthFix"></image>
				
				<view class="name">
					<view class="top">
						深海的鱼
					</view>
					<view class="bot">
						<view v-if="index%2" class="down tag">
							已掉线
						</view>
						<view v-else class="tag">
							收益中
						</view>
						<view class="money">
							+5.24<text>元</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="right">
				<view class="time">
					授权日期：2023.05.01
				</view>
				<view @click="cancel" v-if="index%2" class="btn cancel">
					取消授权
				</view>
				<view v-else class="btn">
					立即授权
				</view>
			</view>
		</view>
		
		
		<!-- 取消授权 -->
		
		<u-popup border-radius="29" v-model="revokeMask" mode="center">
			<view class="qun">
				<revoke @closeMask="closeMask" />
			</view>
			<image @click="revokeMask=false" class="close" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/33.png" mode=""></image>
		</u-popup>
		
	</view>
</template>

<script>
	import revoke from './revoke.vue'
	export default{
		components:{revoke},
		data(){
			return{
				revokeMask:false
			}
		},
		methods:{
			cancel(){
				this.revokeMask =true
			},
			closeMask(){
				this.revokeMask =false
			}
			
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-mode-center-box{
		background: none !important;
	}
	.close{
		width: 65rpx;
		height: 65rpx;
		display: block;
		// background: rgba(255,255,255,0.8);
		margin: 46rpx auto;
	}
	.list1{
		min-height: 110vh;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
			&:last-child{
				border-bottom: none;
			}
			padding: 32rpx 0 21rpx;
			.left{
				display: flex;
				.icon{
					width: 38rpx;
					height: 38rpx;
				}
				.name{
					margin-left: 17rpx;
					.top{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 33rpx;
						margin-bottom: 33rpx;
					}
					.bot{
						display: flex;
						align-items: center;
						.tag{
							font-size: 17rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #3757FF;
							padding: 3rpx 12rpx;
							background: #DDE7FF;
							border-radius: 7rpx 7rpx 7rpx 7rpx;
							opacity: 1;
							border: 1rpx solid #B5C1FF;
							&.down{
								color: #FF2424;
								background: #FFDFDD;
							
								border: 1rpx solid #FFA8A8;
							}
						}
						.money{
							margin-left: 12rpx;
							display: flex;
							align-items: center;
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #3757FF;
							line-height: 35rpx;
							text{
								font-size: 26rpx;
							}
						}
					}
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;
				.time{
					font-size: 20rpx;
					font-family: PingFang SC-Light, PingFang SC;
					font-weight: 300;
					color: #666666;
					margin-bottom: 20rpx;
				}
				.btn{
					width: 172rpx;
					height: 58rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-family: PingFang SC-Light, PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 30rpx;
					
					background: #3757FF;
					border-radius: 29rpx 29rpx 29rpx 29rpx;
					&.cancel{
						background: #A8AECD;
					}
				}
			}
			
		}
	}
	
</style>